<template>
  <div class="header-box">
    <el-button text :class="['general-btn-action', buttonIndex === 0 ? 'general-btn-action-active' : '']"
      style="margin-left: 0;" @click="jumpChildOne">策略生成与量化</el-button>
    <el-button text :class="['general-btn-action', buttonIndex === 1 ? 'general-btn-action-active' : '']"
      @click="jumpChildTwo">电网统计分析</el-button>
    <el-button text :class="['general-btn-action', buttonIndex === 2 ? 'general-btn-action-active' : '']"
      @click="jumpChildThree">知识库</el-button>
  </div>
  <hr class="line" />
  <div class="control-bottom">
    <keep-alive>
      <router-view :key="$route.fullPath" />
    </keep-alive>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const buttonIndex = ref(0)

onMounted(() => {
  router.push('/effect/fault-process/fault-child1')
}
)

function jumpChildOne() {
  buttonIndex.value = 0
  router.push('/effect/fault-process/fault-child1')
}

function jumpChildTwo() {
  buttonIndex.value = 1
  router.push('/effect/fault-process/fault-child2')
}

function jumpChildThree() {
  buttonIndex.value = 2
  router.push('/effect/fault-process/fault-child3')
}

//监控路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    if (newPath === '/effect/fault-process') {
      router.push('/effect/fault-process/fault-child1')
    }
  },
  { immediate: true }
)

</script>

<style scoped lang="scss">
.header-box {
  display: flex;
  padding: computeVh(20)
}

.control-bottom {
  display: flex;
  flex-direction: column;
  height: computeVh(840);
  // padding-top: computeVh(20);
  padding-bottom: computeVh(20);
  padding-left: computeVw(20);
  padding-right: computeVw(20);
  box-sizing: border-box;
  overflow: hidden;
}
</style>